---
id: 613e275749ebd008e74bb62e
title: Hatua ya 8
challengeType: 0
dashedName: step-8
---

# --description--

Sifa muhimu ya _SVG_ (scalable vector graphics) ni kwamba ina sifa ya `path` ambayo inaruhusu picha kuongezwa bila kuathiri matokeo yake.

Kwa sasa, `img` inachukua ukubwa wake wa chaguomsingi, ambao ni mkubwa sana. CSS ina kitendakazi cha `max` ambacho hurejesha kubwa zaidi ya seti ya thamani zilizotenganishwa kwa koma. Kwa mfano:

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

Ongeza picha kwa kutumia `id` yake kama kichaguzi, na uweke `width` kuwa upeo wa `100px` au `18vw`.

# --hints--

Unapaswa kutumia kichaguzi cha `#logo` ili kulenga kipengele cha `img`.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

Unapaswa kuipa `img` `width` ya `max(100px, 18vw)`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
